<template>
  <div class="report-data">
    <h3 class="title">处理举报数据</h3>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="block">
          <img :src="`${$baseImgUrl}report/report_data01.png`"/>
          <p class="static-count">7892<span>条</span></p>
          <p class="static-body">累计举报</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="block">
          <img :src="`${$baseImgUrl}report/report_data02.png`"/>
          <p class="static-count">7880<span>条</span></p>
          <p class="static-body">已经处理举报</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="block">
          <img :src="`${$baseImgUrl}report/report_data01.png`"/>
          <p class="static-count">12<span>条</span></p>
          <p class="static-body">待处理举报</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="block">
          <img :src="`${$baseImgUrl}report/report_data01.png`"/>
          <p class="static-count">704.21<span>万</span></p>
          <p class="static-body">为玩家挽回金额</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ReportData'
};
</script>

<style lang="less" scoped>
  @import '../less/global.less';
  .report-data {
    padding: 10px 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px hsla(0,0%,57.6%,.3);
    .title {
      margin-bottom: 5px;
      font-size: 24px;
      font-weight: 700;
      background: @mainBgColor;
      border-radius: 8px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: #fff;
    }
    .block {
      margin: 5px 0;
      width: 138px;
      border-radius: 8px;
      background: #f2fbff;
      padding: 12px 0 12px 12px;
      img {
        width: 50px;
      }
      .static-count {
        font-size: 28px;
        font-weight: 700;
        color: #33325c;
        span {
          font-size: 18px;
          color: #000;
          font-weight: 400
        }
      }
      .static-body {
        margin-top: 4px;
        font-size: 14px;
        color: #ff6d22;
      }
    }
  }
</style>
